<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{padding: 0; margin: 0;}
		#main{width: 190px; height: 230px;  margin: 0 auto; position: relative; overflow: hidden;}
		#main .img{width: 190px; height: 190px; transition: all 500ms}
		#main .text{width: 100%;height: 150px; position: absolute; left: 0px; top: 205px; transition: all 500ms; }
		#main .text h3{font-size: 12px; color: gray; text-align: center;}
		#main .text p{color: gray; font-size: 12px; padding-top: 10px;}
		#main:hover .img{transform: scale(0.5);}
		#main:hover .text{top: 120px}
	</style>
</head>
<body>
	<div id="main">
		<div class="img"><img src="1.jpg" alt=""></div>
		<div class="text">
			<h3>索尼全幅微单实拍</h3>
			<p>之前Sony正式发表两款史上首度登场的全幅微单A7、A7R，新机规格符合先前情报。这次我们就拿到这两款热机来拍摄，美女美景一个也不少。</p>
		</div>
	</div>
</body>
</html>